<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>压力级制统计</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<%@ include file="../jslib/jquerylib.jsp" %> 
	<link rel="stylesheet" type="text/css" href="<%=path %>/web/style/layout.css" />
    <script type="text/javascript" src="<%=path %>/jslib/jquery.validate.min.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=path %>/web/style/layout.css" />
    
  </head>
  
  <body>
  	<table>
  		<tr>
  			<td valign="top" >
  				<table style='width:460px'>
  					<tr>
  						<td >
  							统计字段：
  							<select class="easyui-combobox"  name="fieldname" 
	     						id="fieldname"  style="width:250px;height: 26px;">
	     						<option value='guanxianyljz'>管线压力级制</option>
	     						<option value='famenyljz'>阀门压力级制</option>
	     						<option value='zhanxiangyljz'>站箱压力级制</option>
			                </select>
  						</td>
  						<td >
  							<input id="btntongji" type="button" value="统计" class="form_bt_orange" onclick="tongji()" />
  							<input id="btnexpexcel" type="button" value="导出" class="form_bt_orange" onclick="expexcel()" />
  						</td>
  					</tr>
  					<tr>
  						<td colspan='2'>
  						 <table id="gridTable"></table>
    					 <div id="gridPager"></div>
    					</td>
  					</tr>
  				</table>
  			</td>
  			<td valign="top">
  				<div id="main" style="height:415px;width:620px;"></div>
  				<script src="<%=path %>/jslib/echarts/dist/echarts-all.js"></script>
  			</td>
  		</tr>
  	</table>
   
  </body>
  <script type='text/javascript'>
		//特征列表
		function tongji(){
			var myChart = echarts.init(document.getElementById('main'));
			var selfieldname = document.getElementById("fieldname").value;
			var gxids = "";
			var fmids = "";
			var zxids = "";
			if (selfieldname=='guanxianyljz'){
				gxids = window.parent.getTreeSelectgx();
				if (gxids==''){
					alert('没有选择需要统计的管线!');
					return;
				}
			}
			else if (selfieldname=='famenyljz'){
				fmids = window.parent.getTreeSelectfm();
				if (fmids==''){
					alert('没有选择需要统计的阀门!');
					return;
				}
			}
			else{
				zxids = window.parent.getTreeSelectzx();
				if (zxids==''){
					alert('没有选择需要统计的站箱!');
					return;
				}
			}
			
			$("#gridTable").jqGrid({
				url:'<%=request.getContextPath() %>/tongjiAction!tongjiYalijz.action?fieldname='+selfieldname+'&gxids='+gxids+'&zxids='+zxids+'&fmids='+fmids,
				datatype: "json",
				height: 300,
				width: 450, 
				colNames:['统计项目','管线编号','合计'],
				colModel:[
					{name:'tongjixm',index:'tongjixm', width:100}, 
					{name:'guanxianbh',index:'guanxianbh', width:200}, 
					{name:'heji',index:'heji', width:100}
				],   
				shrinkToFit:false,
				sortname:'tongjixm',
				sortorder:'asc',
				viewrecords:true,
				multiselect: true, // 是否显示复选框
				multiboxonly : true, 
				rownumbers: false,//显示行号
			    cellEdit: false,
				forceFit : true, 
				rowNum:200,
				mtype: "POST", 
				rowList:[15,20,50,200,500],
				toolbar: [false,"top"],
				jsonReader: {
					root:"rows",		// 数据行（默认为：rows）
					page: "page",  	// 当前页
					total: "total",  // 总页数
					records: "records",  // 总记录数
					repeatitems : false		// 设置成false，在后台设置值的时候，可以乱序。且并非每个值都得设
				},
				prmNames:{rows:"rows",page:"page",sort:"sidx",order:"sord",search:"search"},
				pager:"#gridPager",
				caption: "压力级制统计"
			});
			jQuery("#gridTable").jqGrid('navGrid','#gridPager',{add:false,edit:false,del:false,search:false,refresh:false});

			
			jQuery("#gridTable").jqGrid('setGridParam',
			{
				url:'<%=request.getContextPath() %>/tongjiAction!tongjiYalijz.action?fieldname='+selfieldname+'&gxids='+gxids+'&zxids='+zxids+'&fmids='+fmids
			}).trigger("reloadGrid", [{page:1}]); 
			
 			$.ajax({
					type: "POST",
					async: false,//取消异步提交
					url: '<%=request.getContextPath() %>/tongjiAction!tongjiYalijzpic.action?fieldname='+selfieldname+'&gxids='+gxids+'&zxids='+zxids+'&fmids='+fmids,
					dataType: "json",
					success : function(data, textStatus) {  
			            var option = {
						    title : {
						        text: $('#fieldname').find("option:selected").text(),
						        x:'center'
						    },
						    backgroundColor:'#fff',
						    tooltip : {
						        trigger: 'item',
						        formatter: "{a} <br/>{b} : {c} ({d}%)"
						    },
						    legend: {
						        orient : 'vertical',
						        x : 'left',
						        data:data.label
						    },
						    toolbox: {
						        show : true,
						        feature : {
						            mark : {show: true},
						            dataView : {show: true, readOnly: false},
						            magicType : {
						                show: true, 
						                type: ['pie', 'funnel'],
						                option: {
						                    funnel: {
						                        x: '25%',
						                        width: '50%',
						                        funnelAlign: 'left',
						                        max: 1548
						                    }
						                }
						            },
						            restore : {show: true},
						            saveAsImage : {show: true}
						        }
						    },
						    calculable : true,
						    series : [
						        {
						            name:'合计',
						            type:'pie',
						            radius : '55%',
						            center: ['50%', '60%'],
						            data:data.list
						        }
						    ]
						};
                    
				        myChart.setOption(option);
					}
			});
		}
		
		function expexcel(){
			var selfieldname = document.getElementById("fieldname").value;
			var gxids = "";
			var fmids = "";
			var zxids = "";
			if (selfieldname=='guanxianyljz'){
				gxids = window.parent.getTreeSelectgx();
				if (gxids==''){
					alert('没有选择需要统计的管线!');
					return;
				}
			}
			else if (selfieldname=='famenyljz'){
				fmids = window.parent.getTreeSelectfm();
				if (fmids==''){
					alert('没有选择需要统计的阀门!');
					return;
				}
			}
			else{
				zxids = window.parent.getTreeSelectzx();
				if (zxids==''){
					alert('没有选择需要统计的站箱!');
					return;
				}
			}
			window.open('<%=request.getContextPath() %>/tongjiAction!tongjiYalijzexp.action?fieldname='+selfieldname+'&gxids='+gxids+'&zxids='+zxids+'&fmids='+fmids);
		}
		  	 
	</script>
</html>
